<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(items,index) in page" :key="index">
        <div class="icon" v-for="(item,index) in items" :key="item.id">
          <img :src="item.url" alt="">
          <p>{{item.txt}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'//引入样式
  import { swiper, swiperSlide } from 'vue-awesome-swiper'//使用组件
  export default{
    name:"Icons",
    props:{
      swiper:Array
    },
    components:{//注册组件
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          pagination:".swiper-pagination"
        },
        iconsUrl:[
          {id:"001",txt:"景点门票",url:"https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png"},
          {id:"002",txt:"故宫",url:"https://imgs.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png"},
          {id:"003",txt:"北京必游",url:"https://imgs.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png"},
          {id:"004",txt:"南宫养生温泉",url:"https://imgs.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png"},
          {id:"005",txt:"一日游",url:"https://imgs.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png"},
          {id:"006",txt:"古北水镇",url:"https://imgs.qunarzz.com/piao/fusion/1803/67/9a1678221b8e0e02.png"},
          {id:"007",txt:"北京滑雪",url:"https://imgs.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png"},
          {id:"008",txt:"北京欢乐谷",url:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png"},
          {id:"009",txt:"北京",url:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png"},
          {id:"010",txt:"北京",url:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png"},
        ]
      }
    },
    computed:{//计算属性
      page(){
        const pages=[];
        this.iconsUrl.forEach((item,index)=>{//对数据进行循环
          const page=Math.floor(index/8);//0 0 0 0 0 0 0 0 如果index=8 有九条数据
          if(!pages[page]){
            pages[page]=[];
          }
          pages[page].push(item);
        });
        return pages;
      }
    }
  }
</script>

<style lang="stylus" scoped="scoped">
  .icons >>>.swiper-container{
    overflow hidden
    height 0
    width 100%
    padding-bottom 50%
    border-bottom 1px solid red
  }
  .icons{
    .icon{
      width 25%
      height 0
      padding-bottom 25%
      float left
      text-align center
      img{
        width 60%
        margin-top .07rem;
      }
      p{
        color #6f6f6f;
        margin-top .03rem
        font-size .14rem
      }
    }
  }
</style>
